import React, { Component } from 'react'
import GlobalContext from './Context'

export default class FilmItem extends Component {
  render() {
    // console.log(this.props)
    let { name, poster, grade } = this.props
    return (
      <GlobalContext.Consumer>
        {(value) => {
          return (
            <div className='filmItem'>
              <div className='poster'>
                <img
                  onClick={() => value.changeFilm(this.props)}
                  src={poster}
                  alt={name}
                />
              </div>
              <div className='content'>
                <h4> {name}</h4>
                <div>观众评分： {grade}</div>
              </div>
            </div>
          )
        }}
      </GlobalContext.Consumer>
    )
  }
}
